{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{ data.pod_name }}</title>
    <link href="{% static 'xterm/xterm.css' %}" rel="stylesheet" type="text/css">
    <style>
        body {
            background-color: black;
        }

        .terminal-window {
            background-color: #2f4050;
            width: 99%;
            color: white;
            line-height: 25px;
            margin-bottom: 10px;
            font-size: 20px;
            padding: 10px 0 10px 10px
        }

        .containers select, .containers option {
            width: 100px;
            height: 25px;
            font-size: 18px;
            color: #2F4056;
            text-overflow: ellipsis;
            outline: none;
        }

    </style>
</head>
<body>
<div class="terminal-window">
    <div class="containers">
        Pod名称：{{ data.pod_name }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        容器：
        <select name="container_name" id="containerSelect">
            {% for c in data.containers %}
                <option value="{{ c }}">{{ c }}</option>
            {% endfor %}
        </select>
    </div>
</div>
<div id="terminal" style="width: 100px;"></div>

<script src="{% static 'xterm/xterm.js' %}"></script>
<script src="{% static 'js/jquery-3.6.1.js' %}"></script>
<script>
    var term = new Terminal({cursorBlink: true, rows: 70});
    term.open(document.getElementById('terminal'));

    var cluster_host = '{{ data.cluster_host }}';
    var token = '{{ data.token }}';
    var auth_type = '{{ data.auth_type }}';
    var namespace = '{{ data.namespace }}';
    var pod_name = '{{ data.pod_name }}';

    container = document.getElementById('containerSelect').value;
    console.log(container);


    var ws = new WebSocket('ws://' + window.location.host + '/workload/web_terminal/' + namespace + '/' + pod_name + '/' + container +
    '/?auth_type=' + auth_type + '&token=' + token + '&cluster_host=' + cluster_host);
    console.log(ws);
    // 访问websocket，相当于访问django的url地址，获取views的内容
    ws.onopen = function () {
        // 实时监控输入的需要发送到后端的字符串
        term.on('data', function (data) {
            // 发送我们输入的字符串
            ws.send(data);
        });

        // 监控失败的事件
        ws.onerror = function (event) {
            console.log('error:' + e);
        };

        //读取服务器返回的数据并写入web终端
        ws.onmessage = function (event) {
            term.write(event.data);
        };

        // 关闭websocket
        ws.onclose = function (event) {
            term.write('\n\r\x1B[1;3;31m连接关闭！\x1B[0m');
        };
    };


    $('select').change(function () {
        console.log(container);
        var container = document.getElementById('containerSelect').value;
        console.log(container);
        var ws = new WebSocket('ws://' + window.location.host + '/workload/web_terminal/' + namespace + '/' + pod_name + '/' + container +
    '/?auth_type=' + auth_type + '&token=' + token + '&cluster_host=' + cluster_host);
    console.log(ws);
        // 访问websocket，相当于访问django的url地址，获取views的内容
        ws.onopen = function () {
            // 实时监控输入的需要发送到后端的字符串
            term.on('data', function (data) {
                // 发送我们输入的字符串
                ws.send(data);
            });

            // 监控失败的事件
            ws.onerror = function (event) {
                console.log('error:' + e);
            };

            //读取服务器返回的数据并写入web终端
            ws.onmessage = function (event) {
                term.write(event.data);
            };

            // 关闭websocket
            ws.onclose = function (event) {
                term.write('\n\r\x1B[1;3;31m连接关闭！\x1B[0m');
            };
        };
    })



</script>
</body>
</html>